<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE HTML>
<html>
<head>
    <base href="${ctx }/">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <link rel="stylesheet" href="plugin/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
    <style type="text/css">
     ul{
     list-style-type: none;
     }
    span{
      margin-left:20px;
    }
    li{
    padding: 10px;
    }
    #content{
     margin-left: 60px;
    }
    a{
        color: #73879C;
        }
        .btn-default{
            width: 250px;
		    border: 1px solid #a29d9d;
		    padding: 10px;
		    background-color: #fff;
		    color: #a29d9d;
        }
    </style>
</head>
<body>
  <div class="container-fluid">
    <div class="container row">
         <div>
            <ul class="breadcrumb">
                <li>
                    <i class="icon-home home-icon"></i>
                    <a href="javascript:void(0)">Driver Management(司机管理)</a>
                </li>
            </ul>
        </div>
    <!-- 内容 -->
        <div class="col-md-12">
            <h4>Total Daily Online Time(司机一天上线服务时间)</h4>
            <form class="form-inline" id="updateform">
               <div id='content'>
               </div>
                <br><br>
               <div style="text-align:center"><button class="btn btn-primary" onclick="return save()">Save</button></div> 
            </form>
        </div>
    </div>
</div>
</body>
<!-- 加载需要的js -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="plugin/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="plugin/layer/layer.js"></script>
<script type="text/javascript">
    $(function(){
    	initTime();
    });
    var arr = new Array();
    var arr1 = new Array();
    //初始化城市
    function initTime(){
    	$.ajax({
    		type:"get",
    		url:"configManager/getCityRecord",
    		success:function(dat){
    			var str="<table>";
    			if(dat.code==200){
    				for(var i in dat.data){
    					arr.push(dat.data[i].id);//将id加入到数组中
    					arr1.push(dat.data[i].theServiceTime);
    					str+="<tr><td style='padding-top:6px;'><div class=\" btn-default\" onclick='javascript:void(0)' style='width:240px'>"+dat.data[i].cityName+"</div></td><td><span > <select class=\"form-control \" id=\"the_service_time"+dat.data[i].id+"\"> <option>1</option>"+
    					"<option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option>"
    					+"<option>10</option><option>11</option><option>12</option></select></span><span>hours</span></td></tr>";
    				}
    			}
    			str+="</table>";
    			$('#content').html(str);
    			for(var i in arr){
    	    		var v = $('#the_service_time'+arr[i]+'').val(arr1[i]);
    	    		
    	    	}
    		}
    	});
    }
    //保存
    function save(){
    	if(arr.length==0){
    		layer.msg("State cannot be empty.");
    		return;
    	}
    	var value=new Array();
    	for(var i in arr){
    		var v = $('#the_service_time'+arr[i]+'').val();
    		if(v==""){
    			value.push(" ");
    		}else{
    			value.push(v);
    		}
    	}
    	var theServiceTimes=value.join(",");
    	var ids=arr.join(",");
    	$.ajax({
    		type:"get",
    		url:"configManager/saveServiceTime?theServiceTimes="+theServiceTimes+"&ids="+ids,
    		success:function(dat){
    			if(dat.code==200){
    				layer.msg("Save successful");
    			}else{
    				layer.msg("Save  failure");	
    			}
    		}
    	});
    }
</script>
</html>